<template>
  <div class="has_header">
    <Header></Header>
    <ul class="mine_list">
      <li><span>{{$t('m.autoNotice')}}</span><mt-switch v-model="$store.state.noticeFlag" @change="turn"></mt-switch></li>
    </ul>

  </div>
</template>

<script type="text/ecmascript-6">
  import { MessageBox } from 'mint-ui';
  import Header from './comment/header/header'
  export default {
    components:{Header},
    name: "setting",
    data(){
      return{
        value:false
      }
    },
    watch:{
      '$store.state.noticeFlag'(){
        MessageBox('修改成功');
        this.$router.go(-1)
      }
    },
    mounted(){
      this.$store.state.detailTitle = '通知';
      this.$store.state.showTab = false;
      console.log()
    },
    methods:{
      turn(){
        console.log(this.value)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  border-1px()
    content ''
    position absolute
    width 100%
    height 1px
    left 0
    bottom 0
    border-top 1px solid #F5F5F5
    -webkit-transform-origin 0 100%
    transform-origin 0 100%
    -webkit-transform scaleY(0.5)
    transform scaleY(0.5)
  .has_header
    padding-top 44px;
    height 100vh
    background #FAFAFA
  .mine_list
    padding 0 0.05rem
    margin-top 0.2rem
    background #fff
    li
      position relative
      height 0.5rem
      -webkit-display flex
      display flex
      font-size 0.15rem
      color #000
      align-items center
      padding 0 0.15rem
      -webkit-justify-content:space-between
      justify-content:space-between
      .btn_swith
        position relative
        height 0.3rem
        width 0.5rem
        input
          position absolute
          width 100%
          height 100%
          top 0
          left 0
          opacity 0
          z-index 1
  .btn_swith i
    position absolute
    width 100%
    height 100%
    top 0
    left 0
    border-radius 0.3rem
    border 1px solid #ccc
    background #fff
    box-sizing content-box
    z-index 0
    transition .3s
    &::after
      content ''
      position absolute
      width 0.3rem
      height 0.3rem
      border-radius 50%
      box-shadow 0 0 5px #ccc
      left 0
      top 0
      background #fff
      transition .3s
  .btn_swith input:checked+i
    background #2EB872
    border-color #2FA86B
    &::after
      left 100%
      margin-left -0.3rem
  .has_line li::after
    border-1px()
</style>
